<template>
  <div class="dt-content-project-list">
    <el-table
      :data="ProjectList"
      border
      style="width: 100%"
      :header-cell-style="headerRowStyle"
      v-show="ActiveName !== '4' && ActiveName !== '3'"
      :height="tableHeight"
    >
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="projectName" label="项目名称" min-width="426">
        <template slot-scope="scope">
          <el-tooltip
            :open-delay="500"
            class="item"
            effect="dark"
            :content="scope.row.projectName"
            placement="top-start"
            :disabled="scope.row.isOverFlow"
          >
            <p class="dt-content-project-list-project">{{ scope.row.projectName }}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="output" label="产值" min-width="180" v-if="ActiveName !== '3'">
        <template slot-scope="scope">
          <p class="dt-content-project-list-project" ref="thirdTextContainer">{{ scope.row.output | formatNumberToWan }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="200"> </el-table-column>
      <el-table-column prop="createUname" label="创建人" min-width="180"> </el-table-column>
      <el-table-column prop="masterName" label="负责人" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.masterName ? scope.row.masterName : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskCount" label="任务数量" min-width="180"> </el-table-column>
      <el-table-column prop="projectProgress" label="项目进度" min-width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.projectProgress }}%</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="184">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goDetail(scope.row)" v-if="ActiveName !== '3' && ActiveName !== '4'">查看</el-button>
          <el-badge
            v-if="ActiveName !== '3' && ActiveName !== '4'"
            :value="scope.row.unread"
            :max="99"
            :class="{ 'item-show': scope.row.unread <= 0 }"
          >
          </el-badge>
          <el-button
            type="text"
            size="small"
            @click="goEdit(scope.row.id)"
            v-if="ActiveName !== '3' && ActiveName !== '4' && scope.row.projectState !== 0"
            :disabled="scope.row.isMaster == 0"
            >编辑</el-button
          >
          <el-button v-if="ActiveName == '3'" type="text" size="small" @click="RecoverProject(scope.row)">恢复项目</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="ProjectList" border style="width: 100%" :header-cell-style="headerRowStyle" v-show="ActiveName == '3'">
      <el-table-column prop="projectName" label="项目名称" min-width="426">
        <template slot-scope="scope">
          <el-tooltip
            :open-delay="500"
            class="item"
            effect="dark"
            :content="scope.row.projectName"
            placement="top-start"
            :disabled="scope.row.isOverFlow"
          >
            <p class="dt-content-project-list-project">{{ scope.row.projectName }}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="output" label="产值" min-width="180" v-if="ActiveName !== '3'">
        <template slot-scope="scope">
          <p class="dt-content-project-list-project" ref="thirdTextContainer">{{ scope.row.output | formatNumberToWan }}元</p>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" min-width="200"> </el-table-column>
      <el-table-column prop="createUname" label="创建人" min-width="180"> </el-table-column>
      <el-table-column prop="masterName" label="负责人" min-width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.masterName ? scope.row.masterName : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="taskCount" label="任务数量" min-width="180"> </el-table-column>
      <el-table-column prop="projectProgress" label="项目进度" min-width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.projectProgress }}%</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="184">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="goDetail(scope.row)" v-if="ActiveName !== '3' && ActiveName !== '4'">查看</el-button>
          <el-badge v-if="ActiveName !== '3' && ActiveName !== '4'" :value="scope.row.unread" :max="99" class="item"> </el-badge>
          <el-button
            type="text"
            size="small"
            @click="goEdit(scope.row.id)"
            v-if="ActiveName !== '3' && ActiveName !== '4' && scope.row.projectState !== 0"
            :diable="scope.row.isMaster == 0"
            >编辑</el-button
          >
          <el-button v-if="ActiveName == '3'" type="text" size="small" @click="RecoverProject(scope.row)">恢复项目</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      class="dt-content-project-four"
      :data="ProjectLogList"
      border
      style="width: 100%"
      :header-cell-style="headerRowStyle"
      v-show="ActiveName == '4'"
    >
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="projectName" label="项目名称" min-width="407">
        <template slot-scope="scope">
          <el-tooltip
            :open-delay="500"
            class="item"
            effect="dark"
            :content="scope.row.projectName"
            placement="top-start"
            :disabled="scope.row.isOverFlow"
          >
            <p class="dt-content-project-list-project">{{ scope.row.projectName }}</p>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="createUidName" label="创建人" min-width="280"> </el-table-column>
      <el-table-column prop="masterUidName" label="负责人" min-width="280">
        <template slot-scope="scope">
          <span>{{ scope.row.masterUidName ? scope.row.masterUidName : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operUidNamae" label="操作人" min-width="280">
        <template slot-scope="scope">
          <span>{{ scope.row.operUidNamae ? scope.row.operUidNamae : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operTime" label="操作时间" min-width="280"> </el-table-column>
      <el-table-column prop="operation" label="操作内容" min-width="184"> </el-table-column>
    </el-table>
    <div class="dt-content-project-list-page">
      <el-pagination
        v-if="ActiveName == '4'"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="LogTotalRecord"
      >
      </el-pagination>
      <el-pagination
        v-if="ActiveName !== '4'"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="TotalRecord"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    ProjectList: Array, // 指定prop为Array类型
    ProjectLogList: Array,
    TotalRecord: Number,
    TotalPage: Number,
    LogTotalPage: Number,
    LogTotalRecord: Number,
    ActiveName: {
      type: [String], // 可以是字符串
      required: true, // 必填项
      default: '0' // 如果没有传递，则使用默认值
    }
  },
  data() {
    return {
      currentPage: 1,
      tableHeight: 841
    }
  },
  filters: {
    // formatNumberToWan: function (num) {
    //   if (num >= 10000) {
    //     let wan = (num / 10000).toFixed(4)
    //     // 移除末尾的0，但至少保留两位小数
    //     wan = wan.replace(/(\.\d*?[1-9])0+$|\.0*$/, '$1')
    //     return wan + '万'
    //   } else {
    //     return num.toString()
    //   }
    // }
    formatNumberToWan: function (num) {
      // 将数字转换为字符串，并去除末尾多余的零
      let numStr = num.toFixed(2).replace(/(\.\d*?[1-9])0+$|\.0*$/, '$1')

      // 分割整数和小数部分
      let [integerPart, decimalPart] = numStr.split('.')

      // 转换整数部分为字符串数组，并添加逗号分隔
      integerPart = integerPart.split('').reverse().join('')
      integerPart = integerPart.replace(/(\d{3})(?=\d)/g, '$1,')
      integerPart = integerPart.split('').reverse().join('')

      // 格式化万和元
      if (num >= 10000) {
        let wanPart = Math.floor(num / 10000) // 获取万的部分
        let yuanPart = Math.floor(num % 10000) // 获取元的部分
        let wanStr = wanPart.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,') + '万'
        let yuanStr = yuanPart.toString().padStart(4, '0').replace(/^0+/, '')

        if (yuanStr !== '') {
          if (decimalPart) {
            yuanStr += '.' + decimalPart
          }
          yuanStr += '元'
        }

        return wanStr + yuanStr
      } else {
        // 如果金额小于1万，直接返回元部分，并确保处理小数点
        return integerPart + (decimalPart ? '.' + decimalPart : '') + '元'
      }
    }
  },
  watch: {
    ProjectList(list) {
      this.getTableHeight()
    }
  },
  methods: {
    headerRowStyle() {
      return {
        'font-size': '14px', // 设置表头字体大小
        'background-color': '#fafafa', // 设置表头背景色
        'font-weight': 'bold', // 设置表头字体加粗
        color: '#909399' // 设置表头字体颜色
      }
    },
    goDetail(item) {
      if (item.projectState == 0) {
        this.$router.push('/main/#/pm?tab=create&elTab=0&rootProjectId=' + item.id)
      } else {
        this.$router.push('/main/#/pm?tab=detail&elTab=0&rootProjectId=' + item.id)
      }
    },
    goEdit(id) {
      this.$router.push('/main/#/pm?tab=detail&elTab=0-0&rootProjectId=' + id)
    },
    handleSizeChange() {},
    handleCurrentChange(page) {
      this.$emit('TurnPage', page)
    },
    RecoverProject(row) {
      this.$emit('RecoverProject', row)
    },
    getTableHeight() {
      this.tableHeight = 0
      var th = 0
      if (this.ProjectList.length) th = 40 * this.ProjectList.length + 41
      this.$nextTick(() => {
        setTimeout(() => {
          if (!this.ProjectList.length) return
          const contentHeight = document.querySelector('.dt-content-project-list').clientHeight
          const contentWidth = document.querySelector('.dt-content-project-list').clientWidth

          const headerHeight = document.querySelector('.dt-content-project-list .el-table__header-wrapper').clientHeight

          var ttHeight = contentHeight - headerHeight - 40

          if (contentWidth < 1790) {
            th += 10
            ttHeight += 10
          }

          if (th < ttHeight && th > 0) this.tableHeight = th
          else this.tableHeight = ttHeight
        }, 100)
      })
    },
    setPage(page) {
      this.currentPage = page
    }
  },

  mounted() {
    this.getTableHeight()
    window.addEventListener('resize', this.getTableHeight)
  }
}
</script>
<style scoped>
.dt-content-project-list {
  margin: 16px;
  padding: 14px 14px 0 14px;
  background-color: #fff;
  flex: 1;
  position: relative;
}
.dt-content-project-list-project {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-show {
  opacity: 0;
}
.dt-content-project-list-page {
  /* display: flex;
  justify-content: center; */
  /* padding: 40px 0 20px 0; */
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.dt-content-project-list .dt-content-project-four >>> .el-table__body-wrapper .el-table__cell {
  padding: 8px 0;
}
.dt-content-project-list >>> .el-table__body-wrapper .el-table__cell {
  padding: 2.5px 0;
}
.dt-content-project-list >>> tbody tr.el-table__row td.el-table__cell div.cell {
  color: #1f1f1f;
}
.dt-content-project-list >>> tbody tr.el-table__row td.el-table__cell div.cell .el-button {
  font-size: 14px;
}
/* .dt-content-project-list-header {
  background-color: #fafafa;
  font-size: 14px;
  font-weight: bold;
  color: #909399;
} */

.dt-content-project-list >>> .el-table th.el-table__cell {
  padding: 0;
  height: 40px;
  color: '#909399';
}
.dt-content-project-list >>> .el-table .el-table__row {
  height: 40px;
}
.dt-content-project-list >>> .el-badge {
  padding-top: 3px;
}
</style>
